<template>
  <div class="p-6 space-y-6">
    <h1 class="text-2xl font-bold text-gray-800 mb-4">仪表盘</h1>
    <div class="grid md:grid-cols-4 gap-4">
      <div class="bg-white rounded p-4 shadow">
        <div class="text-sm text-gray-500">总计</div>
        <div class="text-3xl font-bold text-gray-800">{{ stats.total }}</div>
      </div>
      <div class="bg-white rounded p-4 shadow">
        <div class="text-sm text-gray-500">待处理</div>
        <div class="text-3xl font-bold text-red-600">{{ stats.todo }}</div>
      </div>
      <div class="bg-white rounded p-4 shadow">
        <div class="text-sm text-gray-500">处理中</div>
        <div class="text-3xl font-bold text-blue-600">{{ stats.doing }}</div>
      </div>
      <div class="bg-white rounded p-4 shadow">
        <div class="text-sm text-gray-500">已完成</div>
        <div class="text-3xl font-bold text-green-600">{{ stats.done }}</div>
      </div>
    </div>

    <!-- Folder dimension stats -->
    <div class="bg-white rounded p-4 shadow">
      <div class="flex justify-between items-center mb-4">
        <h2 class="font-semibold text-gray-800">按目录统计</h2>
        <router-link to="/issues" class="text-blue-600">查看问题</router-link>
      </div>
      <div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
        <div class="border rounded p-3" v-for="f in folderStats" :key="f.folder_id || 'none'">
          <div class="text-sm text-gray-600">{{ f.name }}</div>
          <div class="text-2xl font-bold text-gray-800">{{ f.count }}</div>
        </div>
      </div>
    </div>

    <div class="bg-white rounded p-4 shadow">
      <div class="flex justify-between items-center mb-4">
        <h2 class="font-semibold text-gray-800">今日任务</h2>
        <router-link to="/issues" class="text-blue-600">查看全部</router-link>
      </div>
      <ul class="divide-y">
        <li v-for="i in list" :key="i.id" class="py-3 flex justify-between items-center">
          <div class="flex items-start gap-3">
            <span :class="badgeClass(i.priority)">{{ priorityTextEn(i.priority) }}</span>
            <div>
              <div class="font-medium text-gray-800">{{ i.title }}</div>
              <div class="text-sm text-gray-500">Status: {{ statusTextEn(i.status) }}</div>
            </div>
          </div>
          <router-link :to="`/issues/${i.id}`" class="text-blue-600">详情</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import api from '../api'

const stats = reactive({ total: 0, todo: 0, doing: 0, done: 0 })
const list = ref([])
const folderStats = ref([])

const badgeClass = (p) => {
  const map = { P0: 'bg-red-100 text-red-600 px-2 py-1 rounded text-xs', P1: 'bg-orange-100 text-orange-600 px-2 py-1 rounded text-xs', P2: 'bg-blue-100 text-blue-600 px-2 py-1 rounded text-xs', P3: 'bg-gray-100 text-gray-600 px-2 py-1 rounded text-xs' }
  return map[p] || map.P2
}

const statusTextEn = (s) => ({ todo: 'Todo', doing: 'Doing', verify: 'Verify', done: 'Done' }[s] || s)
const priorityTextEn = (p) => ({ P0: 'Urgent', P1: 'High', P2: 'Medium', P3: 'Low' }[p] || p)

onMounted(async () => {
  const s = await api.get('/api/stats/dashboard')
  Object.assign(stats, s.data)
  const r = await api.get('/api/issues', { params: { status: 'todo' } })
  list.value = r.data.slice(0, 5)

  const f = await api.get('/api/stats/dashboard/folders')
  const folders = f.data.folders || []
  const unassigned = { folder_id: null, name: '未分配', count: f.data.unassigned || 0 }
  folderStats.value = [...folders, unassigned]
})
</script>

<style>
@import "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css";
</style>
